@charset "utf-8";

@import "common/common1";

.page_menu{
        width: 100%;
        height: 100%;
        position: absolute;
        background: #222222;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transition:transform 300ms ease-in;
        text-align: center;      
        img{
            width: r(161px);
            height: r(136px);
            margin-top: r(189px);
            
        }
        .denglu{
            width: r(493px);
            margin:0 auto ;
            margin-top: r(46px);           
            .denglu_user{
                width: r(493px);
                height: r(53px);
                margin-bottom: r(17px);               
                .user_left{
                    width: r(60px);
                    height: r(53px);
                    background: #303030;
                    line-height: r(53px);
                    i{
                        font-size: r(32px);
                        color: white;
                        vertical-align: middle;
                    }
                }
                .user_right{
                    width: r(433px);
                    height: r(53px);
                    input{
                        width: 100%;
                        height: 100%;
                        background: #3d3d3d;
                        border: 0;
                        font-size: r(20px);
                        padding-left: r(38px);
                    }
                }
            }
            .bangzhu{
                width: r(110px);
                height: r(20px);
                font-size: r(20px);
                a{
                    color: white;
                }
                
            }
            .denglu_anniu{
                margin-top: r(58px);
                input{
                    width: r(493px);
                    height: r(54px);
                    background: #B20000;
                    font-size: r(24px);
                    color: white;
                }
                input:nth-of-type(2){
                    background: #303030;
                    margin-top: r(16px);
                }
            }
        }
    }
    #menu:checked + .page_menu{
        transform: translateX(0);
    }
    .page_search{
        width: 100%;
        height: 100%;
        position: absolute;
        background: #f1f1f1;
        transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transition:transform 300ms ease-in;
        .search_top{
            width: 100%;
            height: r(88px);
            margin: 0 auto;
            line-height: r(88px);
            background: #222222;
            padding: 0 r(16px);
            i{
            font-size: r(54px);
            color: #B20000;
            }
        .sousuo{
            width: r(536px);
            height: r(52px);
            margin-top: r(18px);
            border-radius: 15px;
            border:1px  solid white;
            position: relative;
            .sousuo_left{
                i{
                    font-size: r(32px);
                    color: white;
                    position: absolute;
                    top: r(-16px);
                    left: r(16px);
                }               
            }
            .sousuo_right{
                input{
                    width: r(452px);
                    height: r(50px);
                    position: absolute;                   
                    right: r(20px);
                    border: 0;
                    background: transparent;
                    font-size: r(24px);
                    padding-left: r(10px);
                    color: white;
                }
            }
        }
        }
        .hotsou{
            margin: r(30px);
            p{
                font-size: r(30px);
                margin-left: r(10px);
            }
            ul{
                margin-top: r(16px);
                li{
                    background: white;
                    border: 1px solid gainsboro;
                    font-size: r(30px);
                    width: r(156px);
                    height: r(56px);
                    line-height: r(56px);
                    text-align: center;
                    float: left;
                    margin: r(10px);
                    a{
                        color: #a8a8a8;
                    }
                }
            }
        }
    }
    #search:checked + .page_search{
        transform: translateX(0);
    }